<template>
	<view>
		
		<view class="form">
			<view class="form-item">
				<view class="form-item-label">世系<text>*</text></view>
				<view class="form-item-rig">
					<view class="form-item-input">
						<input type="text" placeholder="请输入世系" placeholder-class="input-ac" v-model="form.shi_shu"/>
					</view>
				</view>
			</view>

			<view class="form-item">
				<view class="form-item-label">行辈<text>*</text></view>
				<view class="form-item-rig">
					<view class="form-item-input">
						<input type="text" placeholder="输入行辈" placeholder-class="input-ac" v-model="form.hang_bei"/>
					</view>
				</view>
			</view>
			<view class="form-item ">
				<view class="form-item-label flex-sp"> 
					<view>字辈|支派房公 <text>*</text></view>
					<view class="rig flex-center" @click="add">
						<image src="@/static/增加.png" mode=""></image>
						添加
					</view>
				</view>
				
			</view>
			<block v-for="(it,index) in form.zi_bei">
				<view class="form-item " style="margin-bottom: 30rpx;">
					<view class="form-item-rig">
						<div class="form-item-rig-more">
							<view class="form-item-input borderRadius-l" style="flex: 1;">
								<input type="text" placeholder="请填写字辈" placeholder-class="input-ac" v-model="it.key"/>
							</view>
							<view class="form-item-rig-more-add flex-center" @click="addFg(index)">添加支派房公</view>
						</div>
				
					</view>
				</view>
				<view class="form-item" v-for="item in it.value">
					
					<view class="form-item-rig">
						<div class="form-item-rig-more">
							<view class="form-item-input borderRadius-l" style="flex: 1;">
								<input type="text" placeholder="请填写之字辈的支派房公" placeholder-class="input-ac" v-model="item.value"/>
							</view>
						</div>
				
					</view>
				</view>
			</block>
		</view>
		
		
		<view class="form-btn flex-center" @click="submit">确定</view>
	</view>
</template>

<script>
	import {
		genealogyGenerationAddHttp
	} from '@/common/http/api.js'
	export default {
		data(){
			return {
				form:{
					shi_shu: '',
					hang_bei: '',
					zi_bei: [
						{
							key: '',
							value: [
								{
									value: ''
								}
							]
						}
					],
					fang_gong: ''
				}
			}
		},
		methods:{
			addFg(index){
				this.form.zi_bei[index].value.push({
					value: ''
				})
			},
			add(){
				this.form.zi_bei.push({
							key: '',
							value: [
								{
									value: ''
								}
							]
						})
			},
			async submit() {
				await this.$mValidate(
					[{
						require: true,
						key: 'shi_shu',
						message: '请输入世系'
					}, {
						require: true,
						key: 'hang_bei',
						message: '输入行辈'
					}], this.form)
				console.log('this.form', this.form)
				if(Array.isArray(this.form.zi_bei) && this.form.zi_bei.length === 0) {
					uni.showToast({
						title:"请添加字辈！",
						icon: 'none'
					})
					return
				}
				if(!this.form.zi_bei.every(i=> i.value.every(j => j.value))) {
					uni.showToast({
						title:"请添加支派房公！",
						icon: 'none'
					})
					return
				}
				let data = {
					...this.form,
					//zi_bei: JSON.stringify(this.form.zi_bei)
				}
				uni.showLoading()
				genealogyGenerationAddHttp(data).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: "提交成功！",
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F1E7;
	}

	.form {
		width: 670rpx;
		margin: 0 auto;
		padding: 30rpx 0;
		padding-bottom: 30rpx;

		.form-item {
			width: 100%;
			margin-bottom: 57rpx;

			.form-item-label {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				margin-bottom: 30rpx;

				text {
					color: #e4393c;
				}

				.form-item-label-subTitle {
					color: #999999;
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}

			.form-item-rig {
				width: 100%;

				.form-item-input {
					width: 100%;
					height: 84rpx;
					background: #D9CEBC;
					border-radius: 10rpx;
					box-sizing: border-box;
					padding: 0 30rpx;
					display: flex;

					input {
						min-width: 0;
						flex: 1;
						height: 100%;

						align-items: center;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #000;

					}

					.input-ac {
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #84643B;
					}
				}

				.Cover {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.Cover-item {
						width: 156rpx;
						height: 212rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						border: 1px solid #D9CEBC;
						box-sizing: border-box;
						padding: 20rpx 15rpx;
						position: relative;

						.Cover-item-tx {
							width: 16rpx;
							position: absolute;
							right: 32rpx;
							bottom: 88rpx;
							height: 90rpx;
							overflow: hidden;

							view {
								height: 82rpx;
								font-family: FZXuanZhenZhuanBianS-R-GB;
								font-weight: 400;
								font-size: 16rpx;
								color: #2B3858;
								height: fit-content;
							}
						}
					}

					.Cover-item-ac {
						background: #D9CEBC;
						border-radius: 8rpx;
						border: 1px solid #84643B;
					}
				}

				.form-item-rig-textareaImg {
					width: 100%;
					background: #D9CEBC;
					border-radius: 10rpx;
					box-sizing: border-box;
					padding: 30rpx 29rpx 19rpx;

					textarea {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: rgba(132, 100, 59, 0.5);
						height: 140rpx;
						margin-bottom: 10rpx;
					}

					.textarea-ac {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #84643B;
					}

					.form-item-rig-textareaImg-img {
						width: 100%;

						.form-item-rig-textareaImg-img-add {
							width: 174rpx;
							height: 174rpx;
							background: #D9CEBC;
							border-radius: 10rpx;
							border: 1px solid #84643B;
							flex-direction: column;

							image {
								width: 37rpx;
								height: 29rpx;
								margin-bottom: 30rpx;
							}

							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #84643B;
						}

						&>image {
							width: 174rpx;
							height: 174rpx;
							border-radius: 10rpx;
						}
					}
				}

				.form-item-rig-upload {
					width: 100%;

					.form-item-rig-upload-add {
						width: 174rpx;
						height: 174rpx;
						background: #D9CEBC;
						border-radius: 10rpx;
						border: 1px solid #84643B;
						flex-direction: column;

						image {
							width: 37rpx;
							height: 29rpx;
							margin-bottom: 30rpx;
						}

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #84643B;
					}

					&>image {
						width: 174rpx;
						height: 174rpx;
						border-radius: 10rpx;
					}
				}

				.form-item-rig-more {
					width: 100%;
					display: flex;
					background: #D9CEBC;
				}

				.development {
					width: 100%;
					position: relative;

					.development-list {
						width: 100%;
						display: flex;
						align-items: center;
						margin-bottom: 30rpx;

						.development-l {
							width: 120rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 36rpx;
							color: #84643B;
							margin-right: 30rpx;
							position: relative;

							input {
								background: #EFE9DD;
								border-radius: 8rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: rgba(132, 100, 59, 0.5);
								width: 63%;
								padding: 10rpx;
							}

							.development-l-ac {
								color: #84643B;
								font-size: 19rpx;
							}
						}

						.development-l::after {
							width: 12rpx;
							height: 12rpx;
							background: #FFFFFF;
							border-radius: 50%;
							border: 1px solid #84643B;
							content: "";
							position: absolute;
							right: -6rpx;
							top: calc(50% - 10rpx);
							transform: rotateY(-50%);
							margin: auto;
							z-index: 9;
						}

						.development-r {
							width: 388rpx;
							background: #EFE9DD;
							border-radius: 8rpx;
							box-sizing: border-box;
							padding: 15rpx 23rpx;
							font-family: Source Han Sans CN;
							font-weight: 800;
							font-size: 24rpx;
							color: #666666;
							display: flex;

							input {
								font-size: 24rpx;
							}
						}
					}
				}

				.development::after {
					width: 1rpx;
					height: 100%;
					position: absolute;
					content: "";
					left: 118rpx;
					top: 0;
					background: #84643B;
				}
			}
		}
	}

	.form-btn {
		width: 580rpx;
		height: 99rpx;
		background: #84643B;
		border-radius: 50rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 0 auto;
		margin-bottom: 30rpx;
	}

	.form-item-rig-more {
		border-radius: 20rpx;
	}
	.title {
		margin: 0 auto;
		width: 580rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 40rpx;
		color: #84643B;
		margin-bottom: 30rpx;
	}
	.subTitle {
		margin: 0 auto;
		width: 580rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		margin-bottom: 30rpx;
	}
	.box {
		width: 100%;
		padding: 30rpx 0;
	}
	.list {
		width: 580rpx;
		margin: 0 auto;
		.list-item {
			margin-bottom: 40rpx;
			width: 580rpx;
			height: 173rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(25,25,25,0.1);
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 0 68rpx 0 55rpx;
			image {
				width: 113rpx;
				height: 144rpx;
			}
			.list-item-r {
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				image {
					width: 32rpx;
					height: 32rpx;
					margin-left: 27rpx;
				}
			}
		}
	}
	.rig {
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
	}
	.form-item-rig-more-add {
		width: 257rpx;
		height: 84rpx;
		background: #B19E85;
		border-radius: 0rpx 10rpx 10rpx 0rpx;
		color: #fff;
	}
</style>